"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import OptionsRadioGroup from "../options-radio-group";
import LogoEditor from "./logo-editor";
import AnimateQuene from "./animate-quene";
import React from "react";
import ImageUploader from "../image-uploader";
import ColorPicker from "./color-picker";
import useData from "@/hooks/useData";
import { useNavigate } from "react-router-dom";

const formSchema = z.object({
  // 图片建议尺寸:1920x1080，jpg/png，2M以内
  background: z.string(),
  // 该功能允许您设置独立的背景，其中3D背景会将背景拉伸为球体背景3D效果更强！2D背景则为正常背景！
  backgroundType: z.enum(["3D", "2D"]),
  // 辉光颜色
  shineColor: z.string(),
  // 头像显示形状。 可选值: Circle（圆形）, Plane（方形）
  shape: z.enum(["Plane", "Circle"]),
  // 动画顺序
  animates: z.array(z.object({ id: z.number(), name: z.string() })),
  // 每轮动画播放时长
  animateSpendTime: z.number(),
  // logo 数据  boolean[][];
  tableData: z.array(z.array(z.number())),
});

const Edit = () => {
  let navigate = useNavigate();

  const { config, setConfig } = useData();
  // 1. Define your form.
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      ...config,
    },
  });

  React.useEffect(() => {
    // Set default values from props
    form.reset({
      ...config,
    });
  }, []);

  // 2. Define a submit handler.
  function onSubmit(values) {
    setConfig(values);
  }

  return (
    <div className="bg-slate-50 py-6">
      <div className="container max-w-6xl mx-auto">
        <div className="py-12 px-12 rounded-lg shadow-2xl bg-white">
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
              <FormField
                control={form.control}
                name="background"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>背景图片</FormLabel>
                    <FormControl>
                      <ImageUploader {...field} />
                      {/* <Input placeholder="背景图片" {...field} /> */}
                    </FormControl>
                    <FormDescription>
                      图片建议尺寸:1920x1080，jpg/png，2M以内
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="backgroundType"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>背景类型</FormLabel>
                    <FormControl>
                      <OptionsRadioGroup
                        options={[
                          { label: "3D", value: "3D" },
                          { label: "2D", value: "2D" },
                        ]}
                        {...field}
                      />
                    </FormControl>
                    <FormDescription>
                      该功能允许您设置独立的背景。选择3D背景时，背景会被拉伸为球体效果，增强3D视觉感；选择2D背景时，则为普通的平面背景。
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="shineColor"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>辉光颜色</FormLabel>
                    <FormControl>
                      <ColorPicker placeholder="辉光颜色" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="shape"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>头像显示形状</FormLabel>
                    <FormControl>
                      <OptionsRadioGroup
                        options={[
                          { value: "Plane", label: "方形" },
                          { value: "Circle", label: "圆形" },
                        ]}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="animates"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>动画顺序</FormLabel>
                    <FormControl>
                      <AnimateQuene {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="animateSpendTime"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>每轮动画播放时长</FormLabel>
                    <FormControl>
                      <div className="relative">
                        <Input
                          placeholder="每轮动画播放时长"
                          type="number"
                          className="pr-10 relative z-10"
                          {...field}
                        />
                        <span className="absolute right-0 rounded-r-lg top-0 w-9 border border-transparent h-9 text-center leading-8 bg-slate-50">
                          s
                        </span>
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="tableData"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Logo 墙</FormLabel>
                    <FormControl>
                      <LogoEditor {...field} />
                    </FormControl>
                    <FormDescription>
                      由于3D签到Logo的拼接需要将Logo图片分割为不同的元素点，因此您需要设置Logo元素。请通过按钮上传一张2:1比例的Logo图片，我们将自动识别图片中的元素点，您可以对这些点进行微调以生成您的Logo数据。
                      <br />
                      注意：上传的Logo图片必须为背景透明的PNG格式。
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className="flex gap-x-6 justify-center">
                <Button type="submit" size="lg" className="cursor-pointer">
                  保存
                </Button>
                <Button
                  variant="outline"
                  className="cursor-pointer"
                  size="lg"
                  onClick={() => {
                    navigate("/", { replace: true });
                  }}
                >
                  预览
                </Button>
              </div>
            </form>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default Edit;
